<!doctype html>
<html ondragstart="return false">
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="关键字">
     <meta name="Description" content="描述">
     <title>滴水</title>
	 <style>
	  body{
	   font-size:12px;
	   font-family:"微软雅黑";
	  }
	  .box{
		width:500px;
		padding:30px;
		margin:100px auto;
		background-color:#fff;
		filter:contrast(20);
	  }
	  .top{
		height:400px;
		position:relative;
	  }
	  .bottom{
		height:100px;
		background-color:blue;
		filter: blur(10px);
	  }
	  .item{
		 position:absolute;
		 top:0;
		 left:50%;
		 transform:translateX(-50%);
		 width:30px;
		 height:30px;
		 border-radius:50%;
		 background-color:blue;
		 animation:drop 1s infinite ease-in;
	  }
	  @keyframes drop{
		0%{
			filter:drop-shadow(0 0px 0 blue) blur(10px);
		}
		80%{
			filter:drop-shadow(0 395px 0 blue) blur(10px);
		}
		100%{
			filter:drop-shadow(0 400px 0 #fff) blur(10px);
		}
	  }
	 </style>
 </head>
 <body>
	<div class='box'>
		<div class='top'>
			<span class='item'></span>
		</div>
		<div class='bottom'>
		</div>
	</div>
 </body>
</html>